<template>
  <view class="yiyuceping">
    <view class="cepingjindu">
      <p class="p1">测评进度</p>
      <view class="jindutiao">
        <view class="jindu">
          <view class="tiao" :style="{ width: width1 }"></view>
        </view>
        <p class="p2">{{ n }} / {{ question.length-1 }}</p>
      </view>
    </view>
    <view class="questions">
      <p class="p5">{{ question[n]?.topic }}</p>
    </view>
    <view class="question">
      <view class="head">
        <view class="fangkuai"></view>
        <p class="p3">单选题</p>
      </view>
      <view
        class="item"
        @click="xiayiti(item.son_id)"
        v-for="(item, index) in question[n]?.options"
        :key="index"
      >
        <p class="p4">{{ item.title }}</p>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { api } from "../../api/api";
import type { questionT } from "../../types/type";
const n = ref<number>(0);
const sonId = ref([]);
// 获取数据
const question = ref<questionT[]>([]);
onMounted(async () => {
  // 发送请求
  const res: any = await api.depression_topics();
  question.value = res.data;
});
const width = ref<number>(0);
const width1 = ref<string>("");
const xiayiti = (son_id: string) => {
  if (n.value < question.value.length-1) {
    n.value++;
    sonId.value.push(son_id);
    width.value = width.value + 55;
  } else {
    uni.navigateTo({
      url: "/pages/yiyujieguo/yiyujieguo" + "?arr=" + sonId.value,
    });
  }
  width1.value = width.value + "rpx";
};
</script>

<style lang="scss" scoped>
.yiyuceping {
  width: 100vw;
  height: 100vh;
  background-color: #d6e8ff;
  overflow: hidden;
  padding: 0 20rpx;
  box-sizing: border-box;
  .tiao {
    width: 0;
    background-color: #0d7cff;
    height: 25rpx;
    border-radius: 20rpx;
  }
  .questions {
    width: 100%;
    line-height: 80rpx;
    border-radius: 15rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin: 20rpx 0;
  }
  .item {
    margin: 20rpx 0;
    line-height: 120rpx;
    border-radius: 15rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    background-color: #fff;
  }
  .cepingjindu {
    display: flex;
    align-items: center;

    margin: 20rpx 0;
  }
  .p1 {
    margin-right: 20rpx;
  }
  .jindutiao {
    display: flex;
    align-items: center;
  }
  .jindu {
    width: 444rpx;
    height: 25rpx;
    background-color: #ebebeb;
    border-radius: 40rpx;
  }
  .question {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #f3f8ff;
    border-radius: 20rpx;
    .head {
      display: flex;
      align-items: center;
      .fangkuai {
        width: 10rpx;
        height: 30rpx;
        background-color: #0d7cff;
        margin-right: 30rpx;
      }
    }
  }
}
</style>
